//  git https://github.com/ant-design/pro-table
// yarn add @ant-design/pro-table 
// 引入 ant d pro table 
// 官网 https://protable.ant.design/api
// 一个比正常ant d 更高级的table 

// ! https://www.bilibili.com/video/BV1qz411z7s3?p=17
import React, { useState, FC, useEffect, useRef } from 'react';
import { Table, Tag, Space, Popconfirm, message, Button } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
// ! MyState2 在model里面导出了 然后在通过umi导入这个接口 其实这个东西是umi搞的鬼
import { connect, Dispatch, Loading, Router, MyState2 } from 'umi' //这里引入umi的connect 用在dva
import MyModal2 from './components/MyModal2'


import { getRemoteList2 } from './service'

// 抽离出来的一个接口文件
import { oneDataItemType, FormValus } from './my.d'

interface MyPageProps {
  mypro: MyState2,
  dispatch: Dispatch,
  myLoadinga: boolean
}

interface ActionType {
  reload: () => void;
  fetchMore: () => void;
  reset: () => void;
}

// ? 下面这句话FC<xxx> 是一个泛型的写法 其实也可以 {a}:{a:number} 这种方式缩写 但是不容易阅读 我在下面的mapStateToProps就用了缩写的方法
const MyPage: FC<MyPageProps> = ({ mypro, dispatch, myLoadinga }) => { // ! FC 这是一个react 函数式组件的 后面在写上接受参数的泛型

  const ref = useRef<ActionType>();

  useEffect(() => {
    console.log('mypro: ', mypro);
  }, [mypro])
  const [modalVisible, setModalVisible] = useState(false) // hooks
  const [record, setRecord] = useState<undefined | oneDataItemType>(undefined) // hooks
  const handleEdit = function (record: oneDataItemType) {
    setRecord(record)
    setModalVisible(true) // hooks
  }

  const handleCancel = function () {
    setModalVisible(false)
  }
  const onFinish = (values: FormValus): void => { //表单提交成功
    console.log('Success:', values);
    if (record?.id) {
      console.log('edit');
      const { id } = record;
      dispatch({// ! 这里用 上面必须取出
        type: 'mypro/edit', // ! 因为需要知道是哪里的 所以用了xx/xx 跟vuex同理 如果在自己模块内的话就可不加
        payload: { id, values }
      }).then(() => {
        ref.current.reload();

      })
    } else {
      console.log('add');
      dispatch({
        type: 'mypro/add', // 
        payload: { values }
      }).then(() => {
        ref.current.reload();
      })
    }
    setModalVisible(false)

  };

  function handleDel(id: number) {
    dispatch({
      type: 'mypro/del',
      payload: { id }
    }).then(res => {
      ref.current.reload();

    })

  }

  function handleAdd() {
    setRecord(undefined)
    setModalVisible(true)
  }

  function handleReset() {
    ref.current.reload();
  }
  const tableRequest = async ({ pageSize, current }: { pageSize: number, current: number }) => {
    const { data, meta } = await getRemoteList2({
      page: current,
      per_page: pageSize
    })
    console.log('meta.total: ', meta.total);
    return {
      data: data,
      success: true,
      total: meta.total
    }
  }
  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Create_time',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: 'Action',
      key: 'action',
      //  👇 像这种地方不知道是什么类型 就直接去查文档就好啦 或者 我感觉可以log typeof 
      render: (text: string, record: oneDataItemType) => (//text 当前行的值  record 当前行的数据
        <Space size="middle">
          <a onClick={() => { handleEdit(record) }} >Edit</a> &nbsp;
          <Popconfirm // Popconfirm气泡确认框
            title="Are you sure delete this task?"
            onConfirm={() => { handleDel(record.id) }}
            //  onCancel={cancel} // ? 取消的不管了
            okText="Yes"
            cancelText="No"
          >
            <a>Delete</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  return (
    <div className='list-table'>
      <Button
        onClick={handleAdd}
        type="primary" ghost>add</Button>
      <Button
        onClick={handleReset} type="primary" style={{ marginLeft: '20px' }}
        ghost>reset</Button>
      <ProTable
        request={tableRequest}
        loading={myLoadinga}
        actionRef={ref}
        columns={columns} dataSource={mypro.data} rowKey='id' />
      <MyModal2
        // handleOk={handleOk}
        handleCancel={handleCancel}
        visible={modalVisible}
        record={record}
        onFinish={onFinish}
      ></MyModal2>
    </div>
  )
}
// state 里面 会有model里面的my
const mapStateToProps = ({ mypro, loading, router }: { mypro: MyState2, loading: Loading, router: Router }) => { // ? 这是接口泛型的简写
  console.log('loading: ', loading);
  // console.log('state: ', state); //这个函数的整体参数
  // state 里面 还有 loading router
  return {
    mypro,
    myLoadinga: loading.models.mypro // 这里是一个布尔值 其实就是my现在是不是在加载
  }
}



export default connect(mapStateToProps)(MyPage);
// export default connect( // 是官网给出的 mapStateToProps简写
//   ({my})=>({my})
// )(Index);